<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./font_fenlei/iconfont.css">
    <link rel="stylesheet" href="./font_wode/iconfont.css">
    
    <style>
        body{
            background-color: rgb(240, 240, 240);
            padding: 0;
            margin: 0;
            margin-bottom: 300px;
        }
        .top{
            background-image: linear-gradient(50deg, rgb(207, 40, 84),rgb(230, 31, 5)); 
            height: 300px;
            display: flex;  
            
            width: 100%;
            z-index: 10;
        }
        .t1{
            display: flex;
            margin-top: 70px;
            margin-left: 60px;
        }
        .t1 img{
            height: 70px;
            margin-top: 20px;
        }
       
        .t1>div h2{
            margin-top: 10px;
            margin-left: 50px;
            font-size: 60px;
        }
        .t1>div span{
            border: 1px solid;
            font-size: 30px;
            margin-left: 20px;
            border-radius: 30px;
            padding: 8px;
            background-color: rgb(209, 193, 193);
            color: black;
        }
       .top .t1t{
            margin-left: -100px;
            margin-top: 30px;
        }
       .top .t1t span{
           font-size: 40px;
           background-color: rgb(254, 139, 170);
        }
        .t2{
         
            display: flex;
            
            width: 100%;
            background-image: linear-gradient(50deg, rgb(207, 40, 84),rgb(230, 31, 5)); 
        }
        .t2>div{
            margin-top: 30px;
            font-size: 30px;
            margin-left: 90px;
            color: rgb(231, 222, 222);
        }
        .t2 span{
           margin-left: 50px;
        }
        .t2 h2{
            font-size: 30px;
            text-align: center;
        }
        .t3{
            width: 90%;
            background-color: rgb(19, 5, 99);
            margin: auto auto;
            display: flex;
            border-radius: 20px;
        }
        .t3>div{
            margin-left: 40px;
            flex-grow: 1;
        }
        .t3 h2{
            color: rgb(199, 199, 34);
        }
        .t3 h3{
            color: rgb(226, 212, 212);
        }
        .dd{
            margin-top: 60px;
            width: 90%;
            background-color: rgb(255, 255, 255);
            margin: auto auto;
            display: flex;
            border-radius: 20px;
            margin-top: 30px;
        }
        .dd>div{
            margin-top: 30px;
            margin-left: 40px;
            flex-grow: 1;
        }
        .dd span{
            font-size: 60px;
            margin-left: 35px;
        }
        .dd h2{
            text-align: center;
            
        }
        .dd h4{
            margin-top: -10px;
            text-align: center;
            color: rgb(145, 136, 136);
        }
        .icon-wodedingdan{
            color: red;
        }

        .qb{
            margin-top: 60px;
            width: 90%;
            background-color: rgb(255, 255, 255);
            margin: auto auto;
            display: flex;
            border-radius: 20px;
            margin-top: 30px;
        }
        .qb>div{
            margin-top: 30px;
            margin-left: 40px;
            flex-grow: 1;
        }
        .qb h3{
            font-size: 30px;
            text-align: center;
           
        }
        .qb h2{
            text-align: center;
        }
       
        .qb h4{
            margin-top: -10px;
            text-align: center;
            color: rgb(145, 136, 136);
        }
        .icon-wodeqianbao{
            color: red;
            font-size: 80px;
            margin-left: 40px;
        }
        .tbb{
            margin-top: 60px;
            width: 90%;
            background-color: rgb(255, 255, 255);
            margin: auto auto;
            display: flex;
            border-radius: 20px;
            margin-top: 30px;
            flex-wrap: wrap;
        }
        .tbb>div{
            margin-top: 30px;
            margin-left: 20px;
            flex-grow: 1;

           
        }
        .tbb span{
            font-size: 80px;
            margin-left: 50px;
        }
        .tbb h2{
            text-align: center;
            margin-left: 20px;
        }
        .bt1{
            display: flex;
        }
        .bt1 h2{
            margin-left: 30px;
            margin-top: 30px;
        }
        .bt1 h3{
            margin-top: 30px;
            margin-left: 750px;
            color: rgb(136, 136, 136);
        }
        .bt2{
            display: flex;
           
        }
        .bt21{
            flex-grow: 1;
            margin-left: 30px;
            border: 1px solid;
            border-radius: 20px;
            background-color: rgb(228, 228, 111);
            margin-right: 20px;
        }
        .bt21 h2{
            text-align: center;
        }
        .bt21 img{
            height: 300px;
            margin-left: 30px;
        }
        .bt22{
            margin-left: 20px;
            flex-grow: 1;
            border: 1px solid;
            border-radius: 20px;
            margin-right: 30px;
        }
        .bt22 h2{
            text-align: center;
        }
        .bt22 img{
            height: 300px;
            margin-left: 50px;
            
        }

        .bottom{
            background-color:white;        
            height: 130px;
            display: flex;  
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 10;
        }
        .bottom>div{
            display: flex;
            flex-grow: 1;
            height: 70px;
            margin-top: 10px;
            

        }
        .bottom a{
            text-decoration:none
        }
        .bottom span{
            font-size: 60px;
            margin-left: 40px;
            color: black;
           

        }
        .bottom p{
            color: black;
            margin-left: 40px;
            text-align: center;
        }

        .txx{
            position: fixed;
            right: 20px;
            top: 1000px;
           
       
           
        }
        .txx1{
            background-color: tomato;
            padding: 10px;
            border-radius: 20px;
            color: rgb(238, 230, 230);
        }
        .txx h2{
            text-align: center;
        }
        .txx h3{
            text-align: center;
            margin-bottom: 0;
        }
        .txx h4{
           margin: 0;
           margin-right: 30px;
           margin-left: 50px;
            font-size: 30px;
            background-color: rgb(102, 92, 92);
            border-radius: 50%;
            text-align: center;
            color: rgb(199, 195, 195);
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="t1">
            <img src="./touxiang.png" >
            <div>
                <h2>小小白</h2>
                <span>京享值6125</span>
                <span>小白守约999分</span>             
                <span>家庭号></span>
            </div>
            <div class="t1t">
                <span class="iconfont icon-wodehaoyou"></span>
                <span class="iconfont icon-shezhi"></span>
                <span class="iconfont icon-xiaoxi"></span>
            </div>   
        </div>
    </div>

    <div class="t2">

    </div>
    <div class="t3">
        <div>
            <h2>试用PLUS</h2>
            <h3>免费领运费券></h3>
        </div>
        <div>
            <h2>试用PLUS</h2>
            <h3>免费领运费券></h3>
        </div>
        <div>
            <h2>试用PLUS</h2>
            <h3>免费领运费券></h3>
        </div>
    </div>

    <div class="dd">
        <div>
            <span class="iconfont icon-daifukuan01"></span>
            <h2>待付款</h2>
        </div>
        <div>
            <span class="iconfont icon-daishouhuo"></span>
            <h2>待收货</h2>
        </div>
        <div>
            <span class="iconfont icon-daipingjia01"></span>
            <h2>待评价</h2>
        </div>
        <div>
            <span class="iconfont icon-tuihuanhuo"></span>
            <h2>退换/售后</h2>
        </div>
        <div>
            <span class="iconfont icon-wodedingdan"></span>
            <h2>我的订单</h2>
            <h4>查看电子发票</h4>
        </div>
    </div>

    <div class="qb">
       
    </div>
  <div class="tbb">
    <div>
        <span class="iconfont icon-RectangleCopy"></span>
        <h2>京东农场</h2>
    </div>
    <div>
        <span class="iconfont icon-RectangleCopy"></span>
        <h2>签到领豆</h2>
    </div>
    <div>
        <span class="iconfont icon-RectangleCopy"></span>
        <h2>问医生</h2>
    </div>
    <div>
        <span class="iconfont icon-RectangleCopy"></span>
        <h2>客户服务</h2>
    </div>
    <div>
        <span class="iconfont icon-RectangleCopy"></span>
        <h2>寄件服务</h2>
    </div>
    <div>
        <span class="iconfont icon-RectangleCopy"></span>
        <h2>闲置换钱</h2>
    </div>
    <div>
        <span class="iconfont icon-RectangleCopy"></span>
        <h2>京东萌宠</h2>
    </div>
    <div>
        <span class="iconfont icon-RectangleCopy"></span>
        <h2>摇钱树</h2>
    </div>
    <div>
        <span class="iconfont icon-RectangleCopy"></span>
        <h2>宠汪汪</h2>
    </div>
    <div>
        <span class="iconfont icon-RectangleCopy"></span>
        <h2>京东爱消除</h2>
    </div>
  </div>

  <div class="bt">
      <div class="bt1">
          <h2>常逛应用</h2>
          <h3>定制 ></h3>
      </div>
      <div class="bt2">
          <div class="bt21">
              <h2>我的PLUS专享特权</h2>
              <img src="./fl_tu.png" >
          </div>
          <div class="bt22">
              <h2>我的种草秀</h2>
              <img src="./fl_tu.png" >
          </div>
      </div>
  </div>

  <div class="bottom">
    <div>
        <a href="./main.html">
        <span class="iconfont icon-shouye"></span>
        <p>首页</p>
    </a>
    </div>
    <div>
        <a href="./fenlei.html">
        <span class="iconfont icon-fenlei"></span>
        <p>分类</p>
    </a>
    </div>
    <div>
        <a href="#">
        <span class="iconfont icon-faxian"></span>
        <p>发现</p>
    </a>
    </div>
    <div>
        <a href="./pay.html">
        <span class="iconfont icon-gouwuche"></span>
        <p>购物车</p>
    </a>
        
    </div>
    <div>
        <a href="./wode.html">
        <span class="iconfont icon-wode"></span>
        <p>我的</p>
    </a>
    </div>
    
    
</div>
<div class="txx">
    <div class="txx1">
        <h2>￥12</h2>
        <h3>惊喜红包</h3>
    </div>
    
    <h4>X</h4>
</div>
    <script>
        var data=[{
            sc:"1",
            gz:"5",
            xh:"0",
            ll:"20",
            jd:"253",
            yh:"0",
            bt:"0.00元",
            jt:"5.00万"
        }]
        var t2=document.querySelector(".t2");
        for(var i=0;i<data.length;i++){
            t2.innerHTML=`
            <div>
            <span>${data[i].sc}</span>
            <h2>商品收藏</h2>
        </div>
        <div>
            <span>${data[i].gz}</span>
            <h2>店铺关注</h2>
        </div>
        <div>
            <span>${data[i].xh}</span>
            <h2>喜欢的内容</h2>
        </div>
        <div>
            <span>${data[i].ll}</span>
            <h2>浏览记录</h2>
            </div>
            `
        }

        var qb=document.querySelector(".qb");
        for(var j=0;j<data.length;j++){
            console.log(qb);
            qb.innerHTML=`
            <div>
            <h3>${data[j].jd}</h3>
            <h2>京豆</h2>
            <h4>领京豆大礼包</h4>
        </div>
        <div>
            <h3>${data[j].yh}</h3>
            <h2>优惠券</h2>
            <h4>下单立省</h4>
        </div>
        <div>
            <h3>${data[j].bt}</h3>
            <h2>白条</h2>
            <h4>想省钱点这里</h4>
        </div>
        <div>
            <h3>${data[j].jt}</h3>
            <h2>京东金条</h2>
            <h4>领免费额度</h4>
        </div>
        <div>
            <span class="iconfont icon-wodeqianbao"></span>
            <h2>我的钱包</h2>
        </div>
            `
        }


        
    </script>
    <script>
    var txx=document.getElementsByClassName("txx")[0];
    var txx1=txx.getElementsByClassName("txx1")[0];
    var h3=txx1.querySelector("h3");
    var h2=txx1.querySelector("h2");
    var h4=txx.querySelector("h4");
    h4.onclick=function(){
        txx.style.display="none";
    }
    </script>
</body>
</html>